<!--
 * @Author: ygl
 * @Date: 2021-12-23 14:25:02
 * @LastEditors: ygl
 * @LastEditTime: 2021-12-27 17:42:07
 * @Description: file content
-->
<template>
  <div ref="pie" :class="className" :style="{ height: height, width: width }" />
</template>

<script setup name='PieChart'>
import * as echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import Resize from './resize'

let chart = null
let pie = ref(null)

let props = defineProps({
  className: {
    type: String,
    default: 'chart',
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '300px',
  },
})

onMounted(() => {
  initChart(pie.value)
})

function initChart(el) {
  chart = echarts.init(el, 'macarons')

  chart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
      left: 'center',
      bottom: '10',
      data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
    },
    series: [
      {
        name: 'WEEKLY WRITE ARTICLES',
        type: 'pie',
        roseType: 'radius',
        radius: [15, 95],
        center: ['50%', '38%'],
        data: [
          { value: 320, name: 'Industries' },
          { value: 240, name: 'Technology' },
          { value: 149, name: 'Forex' },
          { value: 100, name: 'Gold' },
          { value: 59, name: 'Forecasts' },
        ],
        animationEasing: 'cubicInOut',
        animationDuration: 2600,
      },
    ],
  })
  let resetChart = new Resize(chart)
  resetChart.resetSize(chart)
}
</script>
